<script>
export default {
  data() {
    return {
      current_Id: 0, // 控制是登录还是注册下面的选中框
      list: ['账号登录', '注册账号'], // 导航栏
      code: '', // 用于校验的验证码
      div_toggle: true, // 控制是登录还是注册
      search_shop: '', // 搜索栏
      count: 1, // 记录注册/登录时是否出现了错误
      login: { // 登录时的对象
        userAccount: '', // 账号
        userPassword: '', // 密码
      },
      user: { // 用户注册时的对象
        userAccount: '', // 账号
        userPassword: '', // 密码
        userSex: '1', // 性别
        code: '', // 验证码
      },
    }
  },
  methods: {
    // 按钮切换
    toggle_login_btn(index) {
      this.current_Id = index
      if (index === 1) {
        this.div_toggle = false
      } else {
        this.div_toggle = true
      }
    },
    // 获取验证码
    async obtained_code() {
      const { data: res } = await this.$http.get('/flower-user/code')
      this.code = res.data // 这个是保存到变量里面，注册时用于做判断
      this.user.code = res.data
    },
    // 用户注册方法
    async register() {
      this.count = 1
      if (this.user.userAccount.length <= 10 || this.user.userAccount.length > 11) {
        this.$message.error('请输入正确手机号')
        this.count++
      }
      if (this.user.userPassword.length < 6 || this.user.userPassword.length > 14) {
        console.log(this.user.radio)
        this.$message.error('密码长度必须为6-14为字符')
        this.count++
      }
      if (this.user.code != this.code) {
        this.$message.error('验证码不一致！')
        this.count++
      }
       if (this.count == 1) {
        console.log(this.user.userSex);
        const {data : res} = await this.$http.post('flower-user/register', this.user);
        console.log(res);
        if(res.code == 1){
          this.$message.success(res.msg)
          this.$router.push("/login")
        }else{
          this.$message.error(res.msg)
        }
      }
    },
    // 用户登录
    async login_user() {
      this.count = 1
      if(this.login.userAccount.length < 1){
        this.$message.error("请输入正确的账号！")
        this.count++
      }
      if(this.login.userPassword.length < 6 || this.login.userPassword.length > 14){
        this.$message.error("请输入正确的密码")
        this.count++
      }
      if(this.count == 1){
        const {data : res } = await this.$http.post("/flower-user/login",this.login);
        if(res.code == 1){
          this.$message.success(res.msg)
          localStorage.setItem("userId",res.data)
          this.$router.push("/")
        }else {
          this.$message.error(res.msg)
        }
      }
    },
  },
}
</script>

<template>
  <div class="app">
    <header>
      <a href="/"><img src="../images/logo.png" class="img_logo" /></a>
      <input
        type="text"
        placeholder="请输入商品名称"
        v-model="search_shop"
        class="search_input"
      />
      <button class="search_btn">搜索</button>
      <div>
        <img src="../images/dianhua.png" class="img_header" />
        <h3>0000-0000-0000-0000</h3>
      </div>
    </header>
    <section>
      <div class="login">
        <div class="login_nav">
          <h2
            v-for="(item, index) in list"
            :key="index"
            :class="{ cls_h2: index == current_Id }"
            @click="toggle_login_btn(index)"
          >
            {{ item }}
          </h2>
        </div>
        <div v-if="div_toggle">
          <input
            type="text"
            placeholder="请输入手机号/账号"
            v-model="login.userAccount"
            class="acc_input"
          />
          <input
            type="password"
            placeholder="请输入密码"
            v-model="login.userPassword"
          /><br />
          <button @click="login_user()">登录</button>
        </div>
        <div v-else>
          <input
            type="text"
            placeholder="请输入手机号"
            v-model="user.userAccount"
            class="acc_input"
          /><br />
          <label>性别：</label>
          <el-radio v-model="user.userSex" label="1">男</el-radio>
          <el-radio v-model="user.userSex" label="2">女</el-radio>
          <input
            type="password"
            placeholder="请输入密码"
            v-model="user.userPassword"
          />
          <input
            type="text"
            class="code_input"
            placeholder="请输入验证码"
            v-model="code"
          />
          <button class="code_btn" @click="obtained_code()">获取验证码</button>
          <br />
          <button @click="register()">注册</button>
        </div>
      </div>
    </section>
    <footer>
      <span
        >晚云小卖铺终于获得了期待已久的许可证，这意味着他们可以正式开展业务了。这个许可证是他们长期努力的结果，也是他们对未来的坚定信念的证明。
        现在，他们可以开始策划各种营销活动，吸引更多的客户，提升店铺的知名度和影响力。
        同时，他们也可以放心地扩大经营范围，增加新的商品种类，以满足更多客户的需求。总的来说，这个许可证为晚云小卖铺带来了无尽的可能性和机遇。</span
      >
    </footer>
  </div>
</template>

<style lang="less" scoped>
@import url('../css/header.less'); // 引入外部css
@import url('../css/login.less');
</style>
